<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Guardian</title>
    <link rel="icon" type="image/ico" href="<?php echo base_url();?>external/resources/images/favicon.ico" />
    <link rel="shortcut icon" href="<?php echo base_url();?>external/resources/images/favicon.ico" />


    <link href="<?php echo base_url();?>external/js/external/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="<?php echo base_url();?>external/js/external/bootstrap/css/sticky-footer-navbar.css" rel="stylesheet" />

    <link href="<?php echo base_url();?>external/css/default.css" rel="stylesheet" />
    <link href="<?php echo base_url();?>external/css/bootstraphack.css" rel="stylesheet" />
    


</head>
<body onload="fillData(<?php echo $guardian_id?>)">
    <div id="wrap">

      <!-- Fixed navbar -->
      <div class="navbar navbar-default" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <img src="<?php echo base_url();?>external/resources/images/Tagger%20logo_144x144px.png" class="left pull-left" />
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li><a href="<?php echo base_url().'search';?>" >Search</a></li>     
			  <li><a href="<?php echo base_url().'add';?>" >Add</a></li>			  
              <li><a href="<?php echo base_url().'login/logout';?>">Log Out</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Guardian Information</h1>        
          <p class="lead">All fields are required.</p> 
          <div id="Message"></div>
        </div>
        <div>
          <input type="hidden" id="hiddenGuardianID">    
          <div class="row-fluid">
              <form role="form">
                <div class="form-group">
                  <label for="lastName">Last Name</label>
                  <input type="text" class="form-control input-width-md" id="textGuardianLastName" placeholder="" required autofocus/>
                </div>
                <div class="form-group">
                  <label for="firstName">First Name</label>
                  <input type="text" class="form-control input-width-md" id="textGuardianFirstName" placeholder="" required/>
                </div>
                <div class="form-group">
                  <label for="middleName">Middle Name</label>
                  <input type="text" class="form-control input-width-md" id="textGuardianMiddleName" placeholder="" required/>
                </div>
                <div class="form-group">
                  <label for="address">Contact No.</label>
                  <input type="text" class="form-control" id="textGuardianContactNo" placeholder="" required/>
                </div>
                <div class="form-group">
                  <label for="address">Address</label>
                  <input type="text" class="form-control" id="textGuardianAddress" placeholder="" required/>
                </div>
                <div class="form-group">
                  <label for="age">Age</label>
                  <input type="text" class="form-control input-width-sm" id="textGuardianAge" placeholder="" required/>
                </div>
                <div class="form-group">
                  <label for="birthday">Birthday</label>
                  <input type="date" class="form-control input-width-sm" id="textGuardianBirthday" placeholder="" required/>
                </div>               
                <div class="form-group">
                  <label for="selectGender">Gender</label>
                  <div>
                      <select id="selectGender" class="form-control input-width-sm" required>   
                          <option value="Male">Male</option>
                          <option value="Female">Female</option>
                       </select>
                  </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div>
                            <button id="buttonSubmit" type="button" class="btn btn-primary">Update</button>
                            <button id="buttonReset" type="button" class="btn btn-primary">Reset</button>
                            <button id="buttonDeleteGuardian" type="button" class="btn btn-danger">Delete</button>
                        </div>
                    </div> 
                </div>         
                </br>
                </br>           
                <div class="form-group">
                  <label for="divTaggedStudents">Students</label>
                  <div class="span9">
                      <div id="divTaggedStudents" class="span12">
                          <span id="divNoTaggedStudents" class="text-center text-italic text-gray">No tagged
                              students</span>
                      </div>
                  </div>                  
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div>
                            <button id="buttonAdd" type="button" class="btn btn-primary">Add</button>
                        </div>
                    </div> 
                </div>          
              </form>                                                              
            </div>
        </div>

      </div>
    </div>
    <!-- Begin page content -->
    <div id="footer">
      <div class="container">
        <p class="text-muted"></p>
      </div>
    </div>

    <script type="text/javascript" src="<?php echo base_url();?>external/js/external/utilities/jquery.2.1.1.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url();?>external/js/external/json2.js"></script>
    <script type="text/javascript" src="<?php echo base_url();?>external/js/external/bootstrap/js/bootstrap.min.js"></script>
    
    <script type="text/javascript" src="<?php echo base_url();?>external/js/ajaxfunctions/ajaxfunctions.js"></script>

    <script type="text/javascript" src="<?php echo base_url();?>external/js/ajaxfunctions/guardian.js"></script>

    <script type="text/javascript">
        jQuery.noConflict();
    </script>
</body>
</html>
